<template>
    <div class="body">
        <van-nav-bar title="选择咖啡" left-text="" right-text="转增记录" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />
        <div class="box">
            <StandTreat  v-for="item in list" :key="list.coupon_id" :arr="item" :firstTime="item.now_time.slice(0, 10)"
            :lastTime ="item.future_time.slice(0, 10)" ></StandTreat>
        </div>
        <footer>
            <div>
                <van-button type="primary" block>赠送好友</van-button>
            </div>
        </footer>
    </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
import { showToast } from 'vant'
import StandTreat from '@/components/order/StandTreat.vue'
import {onMounted,ref} from 'vue'
import { getUserCoupon } from '@/api/api'
const router = useRouter()
const onClickLeft = () => router.back();
const onClickRight = () => router.push('/choosecoffee')
const list = ref([])
const firstTime = ref()
const lastTime = ref()

// console.log(lastTime)
onMounted(async ()=>{
    const res = await getUserCoupon({uId:11})
    list.value = res.list
    // const firstTime = res.list[0].now_time
    // const lastTime = res.list[0].future_time
    console.log(res);
    res.list.forEach(item => {
        const firstTime = item.now_time.slice(0,10)
        const lastTime = item.future_time.slice(0,10)
        
    });
    // console.log(firstTime)
    // console.log(lastTime)
    // console.log(res)
})
</script>

<style lang="scss" scoped>
.body {
    overflow: hidden;
}

.van-nav-bar {
    position: fixed;
    width: 375px;
    height: 44px;
    // top: 20px;
    color: rgba(56, 56, 56, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
}

.box {
    width: 375px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    margin-top: 44px;
    margin-bottom: 10px;
}

footer {
    height: 60px;
}

footer>div {
    position: fixed;
    width: 375px;
    height: 60px;
    bottom: 0px;
    background-color: rgba(255, 255, 255, 1);
    line-height: 150%;
}

.van-button {
    width: 345px;
    height: 40px;
    position: absolute;
    left: 15px;
    top: 10px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(136, 175, 213, 0.6);
    border-radius: 4px;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
}
</style>